<template>
  <div>
    <Row :gutter="3" style="margin-top:10px">
       <i-col :md="18" :lg="5" :xl="5">
        <Card shadow style="height:630px">
          <div style="display:block;margin-bottom:10px"><span style="font-weight:bold;">人员名称:</span></div>
          <AutoComplete
            v-model="people"
            :data="searchData"
            @on-search="handleSearch"
            @on-select="selected"
            placeholder="输入人员名称"
            style="width:230px;display:block;mairgin-top:10px;">
          </AutoComplete>
          <Button type="primary" @click="getPortrait" style="margin-top:10px">获取人员画像</Button>
        </Card>
      </i-col>
      <i-col :md="18" :lg="16" :xl="13" style="height:630px">
        <Card shadow style="height:630px">
          <v-chart :options="portraitPie" @click="pieClicked" v-show="portraitLoaded" style="height:600px"/>
          <Spin size="large" fix v-if="loadingPortrait"></Spin>
          <div style="text-align:center" v-show="!portraitLoaded">
            <img src="/images/logo.png">
            <h3>还未选择机构</h3>
          </div>
        </Card>
      </i-col>
      <i-col :md="6" :lg="6" :xl="6">
        <Card shadow style="height:630px">
          <Table border :columns="columns1" :data="data1" :height="550"></Table>
        </Card>
      </i-col>
    </Row>
    <Row style="margin-top:20px">
      <Card>
        <trend-line :chartData=trendData :options=trendLineOptions></trend-line>
      </Card>
    </Row>
  </div>
</template>

<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import TrendLine from '_c/trend-line'
import { ChartPie, ChartBar } from '_c/charts'
import ECharts from 'vue-echarts'
import { newDateYearMonthToString } from '@/libs/util'
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo,
    TrendLine,
    ChartPie,
    ChartBar,
    'v-chart': ECharts
  },
  data () {
    return {
      people: '',
      selectedPeople: null,
      selectedPeopleId: null,
      portraitPeople: null,
      portraitPeopleId: null,
      portraitDate: '',
      loadingPortrait: false,
      portraitLoaded: false,
      searchData: [],
      portraitPie: {
        title: {
          text: 'XXX画像',
          subtext: '9月份',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          show: true,
          orient: 'vertical',
          left: 'left',
          data: ['优秀', '良好', '一般', '关注', '重点关注']
        },
        series: [
          {
            name: '画像数据',
            type: 'pie',
            radius: '65%',
            center: ['50%', '60%'],
            data: [
              { value: 335, name: '优秀' },
              { value: 310, name: '良好' },
              { value: 234, name: '一般' },
              { value: 135, name: '关注' },
              { value: 148, name: '重点关注' }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        color: [
          '#91c7ae',
          '#61a0a8',
          '#2f4545',
          '#d48265',
          '#c23531'
        ]
      },
      columns1: [
        {
          title: '业务ID',
          key: 'id',
          width: 80
        },
        {
          title: '业务名称',
          key: 'name'
        }
      ],
      data1: [
        {
          id: 1,
          name: '芒市支行营业室'
        },
        {
          id: 2,
          name: '芒市团结支行'
        },
        {
          id: 3,
          name: '芒市支行城关分理处'
        },
        {
          id: 4,
          name: '芒市支行青年分理处'
        },
        {
          id: 5,
          name: '芒市支行珠宝小镇分理处'
        },
        {
          id: 6,
          name: '芒市支行勐焕分理处'
        },
        {
          id: 7,
          name: '芒市支行华丰分理处'
        },
        {
          id: 8,
          name: '芒市支行遮放分理处'
        }
      ],
      trendData: {
        type: 'line',
        labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        datasets: [
          {
            label: '优秀',
            backgroundColor: '#91C7AE',
            borderColor: '#91C7AE',
            data: [40, 39, 10, 40, 39, 80, 40, 34, 35, 21, 77, 21, 12, 11],
            fill: false,
            pointRadius: 10,
            pointHoverRadius: 5
          },
          {
            label: '良好',
            backgroundColor: '#61A0A8',
            borderColor: '#61A0A8',
            data: [10, 29, 30, 34, 28, 8, 70, 23, 89, 65, 67, 45, 78, 76],
            fill: false,
            pointRadius: 10,
            pointHoverRadius: 5
          },
          {
            label: '一般',
            backgroundColor: '#2F4545',
            borderColor: '#2F4545',
            data: [50, 53, 19, 65, 63, 34, 49, 90, 75, 89, 24, 56, 43, 18],
            fill: false,
            pointRadius: 10,
            pointHoverRadius: 5
          },
          {
            label: '关注',
            backgroundColor: '#D48265',
            borderColor: '#D48265',
            data: [32, 43, 53, 22, 87, 23, 49, 83, 32, 57, 84, 34, 45, 23],
            fill: false,
            pointRadius: 10,
            pointHoverRadius: 5
          },
          {
            label: '重点关注',
            backgroundColor: '#C23531',
            borderColor: '#C23531',
            data: [40, 39, 10, 40, 39, 80, 40, 34, 35, 21, 77, 21, 12, 11],
            fill: false,
            pointRadius: 10,
            pointHoverRadius: 5
          }
        ],
        fill: false
      },
      trendLineOptions: {
        title: {
          display: true,
          text: '客户画像五级分类趋势图'
        },
        responsive: true,
        maintainAspectRatio: false
      }
    }
  },
  mounted () {
    //
  },
  methods: {
    pieClicked () {
    },
    handleSearch (value) {
      if (value) {
        this.searchData = []
        this.axios.get('/api/v1/portrait/people/search', { params: {
          keywords: value
        } }).then((response) => {
          var data = response.data.data
          data.forEach(element => {
            var value = element.id + '--' + element.name
            this.searchData.push(value)
            this.portraitDate = newDateYearMonthToString()
          })
        })
      } else {
        this.searchData = []
      }
    },
    selected (value) {
      var id = value.split('--')[0]
      if (!id) {
        return
      }
      this.currentPeopleId = parseInt(id)
      if (this.currentPeopleId !== this.portraitPeopleId) {
        this.axios.get('/api/v1/portrait/people/info', { params: {
          id: this.currentPeopleId
        } }).then((response) => {
          var data = response.data.data
          this.selectedPeople = data
          // 获取画像数据
          this.loadingPortrait = false
        })
      }
    },
    getPortrait () {
      if (!this.portraitDate) {
        this.portraitDate = newDateYearMonthToString()
      }
      this.requestPortrait(this.currentPeopleId, this.portraitDate)
    },
    requestPortrait (userId, dateStr) {
      this.portraitLoaded = true
      this.loadingPortrait = true
      console.log('=========获取画像数据中=============')
      this.axios.get('/api/v1/portrait/people', { params: {
        user_id: userId,
        date: dateStr
      } }).then((response) => {
        var data = response.data.data
        console.log(data)
      })
    }
  }
}
</script>

<style lang="less">
.count-style {
  font-size: 50px;
}
</style>
